<template>
  <div class="wall">
    <h1>就业信息</h1>

    <div class="content">
      <div class="operate">
        <el-link type="primary" icon="Plus" @click="addDiglog = true">添加就业经历</el-link>
      </div>

      <el-table :data="tableData" style="width: 100%" max-height="700" :loading="loading">
        <el-table-column type="index" label="Id" width="80" align="center" />
        <el-table-column prop="workCity" label="工作城市" align="center" />
        <el-table-column prop="workCompany" label="工作公司" align="center" />
        <el-table-column prop="workPosition" label="工作岗位" align="center" />
        <el-table-column
          prop="startDate"
          label="入职时间"
          width="120"
          align="center"
        />
        <el-table-column label="离职时间" width="120" align="center">
          <template #default="scope">
            {{ scope.row.endDate == null ? "-------" : scope.row.endDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="salary"
          label="薪资/RMB"
          width="120"
          align="center"
          sortable
        />
      </el-table>
    </div>
  </div>


<AddEmploymentInfo v-model:addDiglog="addDiglog" @getEmployment="getEmployment"/>
  
</template>

<script setup >
import { reactive, ref } from "vue";
import axios from "@/axios/index.js";
import AddEmploymentInfo from "./AddEmploymentInfo.vue";
import { useStudentStore } from "@/stores/student";

let tableData = reactive([]);
let loading = ref(true);


let addDiglog = ref(false)

/** 查询列表*/
function getEmployment() {
  loading.value = true;
  axios
    .get("api/v1/front/employment", {
      params: {
        studentId: useStudentStore().studentInfo.studentId,
      },
    })
    .then((res) => {
      loading.value = false;
      tableData = res.data.data;
    });
}
getEmployment();
</script>

<style scoped>
h1 {
  font-size: 30px;
  font-weight: normal;
  margin: 0;
  flex-shrink: 0;
}
.wall {
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #a3a3a3;
}

.content {
  padding: 10px;
  height: 100%;
  border: 1px solid #a3a3a3;
  flex-shrink: 1;
}

.operate {
  padding: 30px;
  display: flex;
}
</style>